<template>
  <div class="Notice">
      <div class="img-wrap">
          <img src="../assets/image/11.png" alt="">
      </div>
      <div class="Notice-title">
          <div class="titles">
              <i>首页></i>
              <i>个人中心></i>
              <i class="sss">公告中心</i>
          </div>
      </div>
      <div class="Notice-cotainer">
          <div class="Notice-wrap">
              <h3>公告中心</h3>
              <ul class="Notice-list">
                  <router-link tag="li" to="/Announcement" v-for="(item,index) in lis " :key="index" :class="{active:index%2==0}">
                      <div>
                        <img src="../assets/image/laba.png" alt="">
                        <span>官方公告 ：</span>
                        <p>{{item.ps}}</p>
                      </div>
                      <i>2017-12-07</i>
                  </router-link>
              </ul>
              <div  class="font">
                <p class="font-btn" style="margin-right:28px;" @click="home">首页</p>
                <p class="font-img" @click="prevOrNext(-1)" aria-hidden="true"><img src="../assets/image/left.png" alt=""></p>
                    <li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item === currentPage}" @click="select(item)">
                        <span>{{item}}</span>
                    </li>
                    <p class="font-img" @click="prevOrNext(1)" aria-hidden="true"><img src="../assets/image/right.png" alt=""></p>
                    <p class="font-btns" style="margin-left:28px;" @click="tail">尾页</p>
            </div>
          </div>
      </div>
  </div>  
</template>
<script>
export default {
    data(){
        return{
            lis:[
                {
                    ps:'NPC 6个月增利系列2017年12月20日起产品正式销售',
                },
                {
                    ps:'ACChian引领区块链3.0时代，ACC助力全球数字货币结算体系',
                },
                {
                    ps:'2017年12月8日，"国际数字资产交易委员会成立邀约资产连A-SDR基金"',
                },
                {
                    ps:'NPC 6个月增利系列2017年12月20日起产品正式销售',
                },
                {
                    ps:'ACChian引领区块链3.0时代，ACC助力全球数字货币结算体系',
                },
                {
                    ps:'2017年12月8日，"国际数字资产交易委员会成立邀约资产连A-SDR基金"',
                },
                {
                    ps:'NPC 6个月增利系列2017年12月20日起产品正式销售',
                },
                {
                    ps:'ACChian引领区块链3.0时代，ACC助力全球数字货币结算体系',
                },
                {
                    ps:'2017年12月8日，"国际数字资产交易委员会成立邀约资产连A-SDR基金"',
                },
                {
                    ps:'NPC 6个月增利系列2017年12月20日起产品正式销售',
                },
            ],
            currentPage: 1,
            totalPages: 50
        }
    },
    methods: {
           select(n) {
                        if (n === this.currentPage) return 
                        if (typeof n === 'string') return 
                        this.currentPage = n
                    },
            prevOrNext (n) {
                            this.currentPage += n
                            this.currentPage < 1
                            ? this.currentPage = 1
                            : this.currentPage > this.totalPages
                            ? this.currentPage = this.totalPages
                            : null
                       },
            home(){
               if(this.currentPage!==1){
                   this.currentPage=1
               }
            },
            tail(){
               if(this.currentPage!==this.totalPages){
                   this.currentPage=this.totalPages
               }
            }
    },
     computed: {
        pages() {
             const c = this.currentPage
             const t = this.totalPages
             if (c <= 10) {
                return [1, 2, 3, 4, 5, 6, 7, 8, 9,'...']
              } else if (c >= t - 4) {
                    return [1, '...', t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
              } else {
                return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, t] 
            }
        }
    }
}
</script>
<style scoped lang="scss">
.Notice{
    .img-wrap{
        height: 200px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .Notice-title{
        width: 1200px;
        margin: 0 auto;
        padding:22px 0 22px 34px;
        .titles{
            color: #333;
            .sss{
                color: #fe8800;
            }
        }
    }
    .Notice-cotainer{
        background: #f3f3f3;
        padding-top: 15px;
        padding-bottom: 62px;
        .Notice-wrap{
            width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 40px 31px 0 35px;
            h3{
                font-size: 20px;
                font-weight: bold;
                border-bottom: 1px solid #333;
                padding-bottom: 5px;
            }
            .Notice-list{
                margin-top: 26px;
                border-top: 1px solid #eee;
                li{
                    height: 60px;
                    padding-left: 50px;
                    padding-right: 58px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: #f6f6f6;
                    div{
                        display: flex;
                        img{
                            width: 16px;
                            height: 16px;
                        }
                        span{
                            margin-left: 10px;
                            color: #fe8800;
                        }
                        p{
                            color: #333;
                            margin-left: 44px;
                        }
                    }
                    i{
                        color: #ccc;
                    }
                }
                .active{
                    background: #fff;
                }
            }
            .font{
        width:770px;
        height: 152px;
        margin:0 auto;
        // margin-top:65px;
        display: flex;
        flex-direction:row;
        align-items: center;
     .font-btn{
         width:63px;
         height:37px;
         background: #ff9a01;
         border-radius:5px;
         color:#fff;
         text-align: center;
         line-height: 37px;
         font-size:14px;
     }
     .font-btns{
         width:63px;
         height:37px;
         background: #666666;
         border-radius:5px;
         color:#fff;
         text-align: center;
         line-height: 37px;
         font-size: 14px;
     }
     .font-img{
         width:32px;
         height:32px;
        img{
            width:100%;
            height:100%;
        }
     }
     .page{
         width:25px;
         padding:0 11px;
         list-style:none;
         
     }
      .actived{
                color: #ff9902;
      }       
}
        }
    }
}
</style>
